<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>userList</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body class="layui-container">
<h1>账单列表</h1>
<br/>
<div class="demoTable">
    <form class="layui-form" action="" autocomplete="off">
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="typeId" id="typeId">
                    <option value="">--请选择--</option>
                    <!--                    <option value="010">北京</option>-->
                    <!--                    <option value="021" selected>上海</option>-->
                    <!--                    <option value="0571">杭州</option>-->
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="date1"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="date2"/>
            </div>
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-sm" data-type="reload" id="searchBtn">搜索</button>
        </div>
        <div class="layui-input-inline">
            <button type="reset" class="layui-btn layui-btn-sm">重置</button>
        </div>
    </form>
</div>
<!--头工具栏按钮 id和table头的toolbar属性绑定-->
<script type="text/html" id="zq_toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" onclick="add()"><i class="layui-icon">&#xE608;</i>添加</button>
    </div>
</script>

<script type="text/html" id="rowBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="favoriteTpl">
    <a href="{:url('admin/favorite/getFavoriteList')}?user_id={{d.id}}" class="layui-table-link">{{ d.total_favorite
        }}</a>
</script>
<table id="demo" lay-filter="test"></table>
<script>
    $(function () {
        // 加载类型列表
        $.ajax({
            type: "GET",
            url: "http://localhost:9004/api/billType/list",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.code = 200) {
                    var list = data.list;
                    var html = "<option value=''>--请选择--";
                    for (var i = 0; i < list.length; i++) {
                        var type = list[i];
                        html += "<option value=" + type.id + ">" + type.name;
                    }
                    $("#typeId").html(html);
                } else {
                    alert('类型加载失败');
                }
            }
        });
    });

    function dateToStr(date) {
        var time = new Date(date);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        M = M < 10 ? ("0" + M) : M;
        var d = time.getDate();
        d = d < 10 ? ("0" + d) : d;
        var h = time.getHours();
        h = h < 10 ? ("0" + h) : h;
        var m = time.getMinutes();
        m = m < 10 ? ("0" + m) : m;
        var str = y + "-" + M + "-" + d + " " + h + ":" + m;
        return str;
    }

    layui.use(['layer', 'table', 'element'], function () {
        var table = layui.table;
        table.render({
            elem: '#demo'
            , url: 'http://localhost:9004/api/bill/list-page' //数据接口
            , method: 'get'
            , toolbar: '#zq_toolbar' //开启头工具栏，此处default：显示默认图标，可以自定义模板，详见文档
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code == 200 ? 0 : 404,//解析接口状态//成功应默认为0
                    "msg": res.msg, //解析提示文本
                    "count": res.pageInfo.total, //解析数据长度
                    "data": res.pageInfo.list //解析数据列表
                };
            }
            , cols: [[ //表头
                {field: 'id', title: '编号'}
                , {field: 'title', title: '标题'}
                , {
                    field: 'billTime', title: '时间', templet: function (d) {
                        return dateToStr(d.billTime);
                    }
                }
                , {field: 'price', title: '金额'}
                , {field: 'typeName', title: '类别'}
                , {field: 'explain', title: '说明'}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#rowBar'}
            ]]
        });
        var $ = layui.$, active = {
            reload: function () {
                table.reload('demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        typeId: $('#typeId').val(),
                        date1: $('#date1').val(),
                        date2: $('#date2').val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('#searchBtn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除吗？', function (index) {
                    // obj.del();
                    // layer.close(index);
                    //向服务端发送删除指令
                    del(data.id);
                    layui.table.reload('demo');
                });
            } else if (obj.event === 'edit') {
                edit(data.id);
            }
        });
    });

    layui.use(['laydate', 'form'], function () {
        // 加载可选类型数据
        var laydate = layui.laydate;
        var form = layui.form;
        laydate.render({
            elem: "#date1", //绑定id为date4的元素
            type: "date" // 年月日选择器
        });
        laydate.render({
            elem: "#date2", //绑定id为date4的元素
            type: "date" // 年月日选择器
        });
    });

    <!--增删改-->
    // 添加
    function add() {
        var toUrl = "add.html";
        ToOpenPopups(toUrl, '✚ 添加账单', '60%', '80%');
    }

    // 根据ID修改信息
    function edit(id) {
        var toUrl = "edit.html?id=" + id;
        ToOpenPopups(toUrl, '✎ 修改账单', '48%', '65%');
    }

    // 根据ID删除
    function del(id) {
        $.ajax({
            type: "POST",
            url: "http://localhost:9004/api/bill/" + id,
            data: $(".layui-form").serialize() + "&_method=DELETE",
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("删除成功");
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    }

    /**
     * 导航菜单处理函数 包括 "添加"、"修改"
     * @param op_url URL 地址
     * @param tag 操作标识：add / edit
     * @param title
     * @constructor
     */
    function ToOpenPopups(op_url, title, width, height) {
        var widthTag = width ? width : '70%';
        var heightTag = height ? height : '65%';
        var openPopus = layer.open({
            type: 2,
            shade: 0.61,
            shadeClose: true,
            anim: 4,
            moveOut: true,
            title: title,
            maxmin: true, //开启最大化最小化按钮
            area: [widthTag, heightTag],
            content: op_url, //可以出现滚动条
            //content: [op_url, 'no'], //如果你不想让iframe出现滚动条
        });
        layer.style(openPopus, {
            background: '#EEEEEE',
        });
    }
</script>
</body>
</html>